<style lang="scss" scoped>
.search_wrap {
  background: #fff;
  border-radius: 2px;
  margin-bottom: 10px;
}
.title_wrap {
    background: #fff;
    padding: 20px 0;
    .title_header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgb(240, 240, 240);
        padding-bottom: 20px;
    }
    .card_wrap {
        display: flex;
        padding: 0 20px;
    }
}

.table_wrap {
    padding: 20px;
    margin-top: 20px;
    background: #fff;
    .export_box {
      text-align: right;
      padding-bottom: 10px;
    }
}
</style>

<template>
    <div class="search_wrap">
        <Search @submit="handleSubmit" />
    </div>
    <div class="title_wrap">
        <div class="title_header">
            <common-title title="数据分析"/>
            <filter-form @change="handleFilterChange"/>
        </div>
        <div class="card_wrap">
            <card-item
                title="现金消耗(元)"
                :showNum="pageData.sumCost"
            />
            <card-item
                title="现金回收(元)"
                :showNum="pageData.sumBrokerage"
                bacColor="#53c1f5"
            />
            <card-item
                title="新用户充值金额"
                :showNum="pageData.newSumRecharge"
                hasTag
                bacColor="#4ccdcf"
                tagColor="#0f89ab"
            />
            <card-item
                title="新用户现金回收金额"
                :showNum="pageData.newSumBrokerage"
                hasTag
                bacColor="#fd9c46"
                tagColor="#fc794c"
            />
        </div>
    </div>
    <div class="table_wrap">
      <div class="export_box">
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
        <common-table 
          :pages="pageData.pages" 
          :data="pageData.tableData" 
          :columns="columns"
          @page-change="handlePageChange"
        />
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import commonTable from "@/components/commonTable/index.vue";
import Search from './component/search.vue'
import commonTitle from "@/components/commonTitle.vue";
import CardItem from './component/cardItem.vue'
import FilterForm from './component/filterForm.vue'
import { generatorColumns } from './config'
import { AnalyzeSumData, AnalyzePageRecords, AnalyzePageRecordsExport } from '@/apis/analyze'
import { threeMonthAgo, todayDate } from '@/utils/time'
import { ElMessage } from 'element-plus'
const columns = generatorColumns()
const pageData = reactive({
  formData: {
    endDate: todayDate,
    startDate: threeMonthAgo
  }, 
  pages: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  },
  tableData: [],
  sumCost: 0,
  sumBrokerage: 0,
  newSumRecharge: 0,
  newSumBrokerage: 0
})
const handleSubmit = params => {
  Object.assign(pageData.formData, params)
  handleSearch()
}
const handleFilterChange = search => {
  Object.assign(pageData.formData, search)
  handleSearch()
}
const handleSearch = () => {
  getCashCost()
  getSumBrokerage()
  getNewSumRechagrge()
  getNewSumBrokerage()
  getTableData()
}
// 导出
const handleExport = () => {
  const params = { groupByType: 'USER_DAY', ...pageData.formData, pager: pageData.pages }
  AnalyzePageRecordsExport(params).then((data) => {
    ElMessage({
        message: '导出成功',
        type: 'success',
    })
  })
}
// 查询现金消耗
const getCashCost = async () => {
  const params = { sumDataType: 'SUM_COST', ...pageData.formData }
  const res = await AnalyzeSumData(params)
  pageData.sumCost = res
}
// 查询现金回收
const getSumBrokerage = async () => {
  const params = { sumDataType: 'SUM_BROKERAGE', ...pageData.formData }
  const res = await AnalyzeSumData(params)
  pageData.sumBrokerage = res
}
// 查询新用户充值
const getNewSumRechagrge = async () => {
  const params = { sumDataType: 'NEW_SUM_RECHARGE', ...pageData.formData }
  const res = await AnalyzeSumData(params)
  pageData.newSumRecharge = res
}
// 查询新用户回收
const getNewSumBrokerage = async () => {
  const params = { sumDataType: 'NEW_SUM_BROKERAGE', ...pageData.formData }
  const res = await AnalyzeSumData(params)
  pageData.newSumBrokerage = res
}
// 获取表格数据
const getTableData = async () => {
  const params = { groupByType: 'USER_DAY', ...pageData.formData, pager: pageData.pages }
  const res = await AnalyzePageRecords(params)
  console.log('res getTableData: ', res);
  pageData.tableData = (res.records || []).map(v => {
    const { roiList } = v
    const kkMap = roiList.reduce((pre, cur) => {
      return Object.assign(pre, cur)
    }, {})
    console.log('kkMap: ', kkMap);

    return { ...v, ...kkMap }
  })
  pageData.pages.total = res.total
}
const handlePageChange = pages => {
  Object.assign(pageData.pages, pages)
  getTableData()
}
onMounted(() => {
  handleSearch()
})
</script>
